<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <title>西外可视化分析大屏</title>
    <link rel="stylesheet" href="../static/assets/css/iconfont.css">
    <link rel="stylesheet" href="../static/css/common.css">
    <link rel="stylesheet" href="../static/css/tradeCooperation.css">
    <script src="../static/assets/js/jquery-3.3.1.min.js"></script>
</head>

<body id="index">
<div id="container">
    <script src="../static/js/common.js"></script>
    <header>
        <div class="header-l">
            <h1 class="zh">一带一路沿线国家贸易合作</h1>
            <h1 class="en">National Trade Cooperation along the Belt and Road</h1>
        </div>
        <div class="header-r">
            <time id="headerTime"></time>
        </div>
    </header>
    <main>
        <!--样式里的l,m,r,t,b分别代表左，中，右，上，下-->
        <div class="l">
            <div class="l-t">
                <h3 class="zh">数据统计</h3>
                <h3 class="en">Data statistics</h3>
                <div class="l_text">
                    <h4>一带一路国家GDP</h4>
                    <div class="text">
                        <span class="digital-num">14.5</span>
                        <span class="ratevalue">万亿美元<i class="iconfont icon-shuju"></i></span>
                        <span>18.4%</span>
                    </div>
                </div>
                <div class="l_text">
                    <h4>一带一路国家人口</h4>
                    <div class="text">
                        <span class="digital-num">27.8</span>
                        <span class="ratevalue">万亿美元<i class="iconfont icon-shuju"></i></span>
                        <span>18.4%</span>
                    </div>
                </div>
                <div class="l_text">
                    <h4>一带一路国家对外贸易总额</h4>
                    <div class="text">
                        <span class="digital-num">9.3</span>
                        <span class="ratevalue">万亿美元<i class="iconfont icon-shuju"></i></span>
                        <span>27.8%</span>
                    </div>
                </div>

            </div>
            <div class="l-b">
                <div class="chartBox">
                    <h3 class="zh">一带一路国家对外投资贸易额前10位国家</h3>
                    <h3 class="en">Top 10 countries along the Belt and Road in terms of outward investment volume</h3>
                    <div class="thecity" id="ec01_line_thecity"></div>
                </div>
                <div class="chartBox">
                    <h3 class="zh">一带一路国家与中国贸易额前10位国家</h3>
                    <h3 class="en">Top 10 countries along the Belt and Road in terms of trade volume with China</h3>
                    <div class="thecity" id="ec02_line_thecity" ></div>
                </div>

            </div>
        </div>

        <div class="r">
                <div class="r-t">
                    <div class="trendbox">
                        <h3 class="zh">中国与一带一路国家贸易趋势</h3>
                        <h3 class="en">Trade tendency between China and countries along the Belt and Road</h3>
                        <div class="trendboxContent" id="ec03_line_tradetrend"></div>
                    </div>
                    <div class="trendbox">
                        <h3 class="zh"> 中国各区域与一带一路国家出口趋势</h3>
                        <h3 class="en">Export tendency in different areas in China and countries along the Belt and Road</h3>
                        <div class="trendboxContent" id="ec04_line_exporttrend"></div>
                    </div>
                    <div class="trendbox">
                        <h3 class="zh">中国各区域与一带一路国家进口趋势</h3>
                        <h3 class="en">Import tendency in different areas in China and countries along the Belt and Road</h3>
                        <div class="trendboxContent" id="ec05_line_importtrend"></div>
                    </div>



                </div>
                <div class="r-b">
                    <div class="r_b_box">
                        <h3 class="zh">西部地区贸易趋势（贸易主体）</h3>
                        <h3 class="en">Trade tendency in terms of trading organizations in western China</h3>
                        <div class="chartBox">
                            <div class="lengtd">
                                <i class="icons"></i>
                                <span class="ratevalue">出口</span>
                            </div>
                            <div class="trade" id="ec06_line_importtrend"></div>
                        </div>
                        <div class="chartBox">
                            <div class="lengtd">
                                <i class="icons"></i>
                                <span class="ratevalue">进口</span>
                            </div>
                            <div class="trade" id="ec07_line_importtrend"></div>
                        </div>
                    </div>
                    <div class="r_b_box">
                        <h3 class="zh">西部地区贸易趋势（贸易方式）</h3>
                        <h3 class="en">Trade tendency in terms of trading methods in western China</h3>
                        <div class="chartBox">
                            <div class="lengtd">
                                <i class="icons"></i>
                                <span class="ratevalue">出口</span>
                            </div>
                            <div class="trade" id="ec08_line_importtrend"></div>
                        </div>
                        <div class="chartBox">
                            <div class="lengtd">
                                <i class="icons"></i>
                                <span class="ratevalue">进口</span>
                            </div>
                            <div class="trade" id="ec09_line_importtrend"></div>
                        </div>
                    </div>
                    <div class="r_b_box">
                        <h3 class="zh">西部地区贸易趋势（运输方式）</h3>
                        <h3 class="en">Trade tendency in terms of transportation methods in western China</h3>
                        <div class="chartBox">
                            <div class="lengtd">
                                <i class="icons"></i>
                                <span class="ratevalue">出口</span>
                            </div>
                            <div class="trade" id="ec010_line_importtrend"></div>
                        </div>
                        <div class="chartBox">
                            <div class="lengtd">
                                <i class="icons"></i>
                                <span class="ratevalue">进口</span>
                            </div>
                            <div class="trade" id="ec011_line_importtrend"></div>
                        </div>
                    </div>
                </div>
        </div>
    </main>
</div>
<script src="../static/assets/js/echarts-4.2.0.js"></script>
<script src="../static/assets/js/echarts-gl.js"></script>
<script src="../static/js/chartsCom.js"></script>
<script src="../static/js/tradeCooperation.js"></script>
</body>
</html>








